<template>
  <view class="trends">
    <view style="height:24rpx;">
    </view>
    <view :style="'height:'+statusBarHeight+'px;'">
    </view>
    <view class="searchBox">
      <image class="navLeftIcon" src="/static/images/nav-left.png" mode="" @click.stop="goback()"></image>
      <u-search style="width: 100%;" maxlength="45" placeholder="请输入昵称搜索" :action-style="actionStyle" search-icon="/static/images/search.png" v-model="query.search" @clear="onSearch('clear')" action-text="搜索" @custom="onSearch('search')"></u-search>
    </view>
    <!-- <view class="searchBox">
      <image class="navLeftIcon" src="/static/images/nav-left.png" mode="" @click.stop="goback()"></image>

      <view class="search">
        <image class="prefix" src="/static/images/my/search.png" mode=""></image>
        <u-input class="input" placeholder="请输入昵称搜索" v-model="keywords" :border="border" clearable>
        </u-input>
      </view>
    </view> -->
    <view class="instrumentTabs" v-if="true">
      <u-tabs name="name" :list="list" item-width="172rpx" bar-width="18" :bar-style="{'background-color':'#FF2544'}" bar-height="6" active-color="#333333" inactive-color="#999999" :is-scroll="false" :current="current" @change="change"></u-tabs>
    </view>
    <view class="content-box">
      <view style="height: 32rpx;"></view>
      <user v-if="current==0" :query="query" ref="user" :screenHeight="screenHeight" :excessHeight="excessHeight"> </user>
      <user v-if="current==1" :query="query" ref="user1" :screenHeight="screenHeight" :excessHeight="excessHeight"> </user>
    </view>
  </view>
</template>

<script>
import user from '../../componets/user/index'
export default {
  components: {
    user
  },
  data() {
    return {
      statusBarHeight: uni.getStorageSync('statusBarHeight'),
      excessHeight: 176,
      screenHeight: '',
      actionStyle: {
        'font-size': '28rpx',
        'font-family': 'PingFang SC-Medium, PingFang SC',
        'font-weight': '500',
        'color': '#999999',
      },
      border: false,
      current: '',
      keywords: '',
      list: [{
        name: '关注',
        value: '7'
      }, {
        name: '粉丝',
        value: '8'
      }],
      // 必传参数 
      query: {
        types: '',//帖子类型:1=交流圈,2=二手乐器,3=求货,4=代加工
        position: '7',//请求位置:3=搜索页,7=用户关注列表,8=用户粉丝列表
        search: ''
      },
    }
  },
  onLoad(options) {

    this.$nextTick(() => {
      this.current = options.currentIndex
      if (this.current == 0) {
        this.query.position = '7'
      } else if (this.current == 1) {
        this.query.position = '8'
      }
    })

    const result = uni.getSystemInfoSync();
    let safeAreaBottom = uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().safeArea.height;
    this.screenHeight = uni.getStorageSync('screenHeight') - safeAreaBottom - this.statusBarHeight;
  },
  methods: {
    change(index) {
      this.current = index;
      this.query.position = this.list[index].value
      console.log('position' + this.query.position)
    },
    goback() {
      uni.navigateBack()
    },
    onSearch(type) {
      if (type == 'clear') {
        this.query.search = ''
      };
      let keyObj = ''
      if (this.query.position == 7) {
        keyObj = 'user'
      } else if (this.query.position == 8) {
        keyObj = 'user1'
      }
      this.$refs[keyObj].init();
    },
  }
}
</script>

<style lang="scss" scoped>
.trends {
  .searchBox {
    width: 750rpx;
    height: 88rpx;
    background: #ffffff;

    .search {
      width: 100%;
      height: 66rpx;
      background: #f5f5f5;
      border-radius: 44rpx 44rpx 44rpx 44rpx;
      display: flex;
      align-items: center;

      .prefix {
        width: 32rpx;
        height: 32rpx;
        margin: 0 16rpx 0 24rpx;
      }

      .input {
        width: 95%;
      }
    }
  }

  .instrumentTabs {
    height: 98rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    font-size: 28rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    color: #999999;
    line-height: 33rpx;
    overflow: hidden;
  }
  .content-box {
    // margin-top: 32rpx;
  }
}
</style>